<%--
  Created by IntelliJ IDEA.
  User: xiaoyuyu
  Date: 2019/7/2
  Time: 13:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <title>
        X-admin v1.0
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="./css/x-admin.css" media="all">
</head>
<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
              <a><cite>首页</cite></a>
              <a><cite>商品管理</cite></a>
              <a><cite>分类管理</cite></a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"  href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <form class="layui-form x-center" action="" style="width:50%">
        <div class="layui-form-pane" style="margin-top: 15px;">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:60px">所属分类</label>
                <div class="layui-input-inline" style="width:120px;text-align: left">
                    <select name="father_code" id="father_c">
                        <option value="0">顶级分类</option>
                        <c:forEach items="${classifies}" var="classifyInfo">
                            <option value="${classifyInfo.code}">${classifyInfo.name}</option>
                        </c:forEach>

                    </select>
                </div>
                <div class="layui-input-inline" style="width:120px">
                    <input type="text" name="name"  placeholder="分类名" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline" style="width:80px">
                    <button class="layui-btn"  lay-submit="" lay-filter="add"><i class="layui-icon">&#xe608;</i>增加</button>
                </div>
            </div>
        </div>
    </form>
    <xblock><button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon">&#xe640;</i>批量删除</button><span class="x-right" style="line-height:40px">共有数据：88 条</span></xblock>
    <table class="layui-table">
        <thead>
        <tr>
            <th>
                <input type="checkbox" id="c_classify_t" value="" onclick="choiseAll()">
            </th>
            <th>
                分类名
            </th>
            <th>
                操作
            </th>
        </tr>
        </thead>
        <tbody id="x-link">
        </tbody>
    </table>

    <div id="page"></div>
</div>
<script src="./lib/layui/layui.js" charset="utf-8"></script>
<script src="./js/jquery.min.js" charset="utf-8"></script>
<script src="./js/x-layui.js" charset="utf-8"></script>
<script>

    //进入页面加载第一页
    var currentPage = 1;
    $(function () {
        pageContro(currentPage);

    });
    //清空当前页面列表
    function clear_list() {
        $("[id='x-link']").replaceWith("<tbody id=\"x-link\"></tbody>");
    }
    //页面控制器
    function pageContro(currentPage){
        clear_list();
        $.ajax({
            type:"POST",
            url:"${pageContext.request.contextPath}/getOnePageList",
            data: {"index":currentPage},
            success:function (data) {
                console.log(data);
                clear_list();
                layui.use(['layer','laypage'], function(){
                    laypage = layui.laypage;
                    laypage({

                        cont: 'page'
                        ,pages: Math.ceil(data.count/5)
                        ,first: 1
                        ,last: Math.ceil(data.count/5)
                        ,prev: '<em><</em>'
                        ,next: '<em>></em>'
                        ,curr:currentPage
                        ,jump: function(obj,first){
                            if(!first){
                                currentPage = obj.curr;
                                console.log(currentPage);
                                pageContro(currentPage);
                            }

                        }
                    });
                });
                //将查询到的数据填充到表格中
                $.each(data.data, function (index, obj) {
                    console.log(obj);
                    $('#x-link').append('<tr><td><input type="checkbox"value='+ obj.code +' name="c_classify"></td><td>'+obj.name+'</td><td class="td-manage"><a title="删除"href="javascript:;"onclick="cate_del(this,'+ obj.code +')"style="text-decoration:none"><i class="layui-icon">&#xe640;</i></a></td></tr>');

                });

            }
        });
    }

    layui.use(['element','layer','form','laypage'], function(){
        $ = layui.jquery;//jquery
        lement = layui.element();//面包导航
        layer = layui.layer;//弹出层
        form = layui.form();
        laypage = layui.laypage;//分页

        //监听提交
        form.on('submit(add)', function(data){
            // console.log(data);
            //发异步，提交数据
            $.ajax({
                type:"POST",
                url:"${pageContext.request.contextPath}/addClassify",
                data: data.field,
                success:function (data) {
                    console.log(data);
                    if(data.state_code == "0"){
                        layer.alert("增加失败", {icon: 6});
                    }else {
                        layer.alert("增加成功", {icon: 6});
/*                        location.replace(location.href);*/
                        pageContro(1);
                        // $('#x-link').prepend('<tr><td><input type="checkbox"value='+ data.code +' name="c_classify"></td><td>'+data.name+'</td><td class="td-manage"><a title="删除"href="javascript:;"onclick="cate_del(this,'+ data.code +')"style="text-decoration:none"><i class="layui-icon">&#xe640;</i></a></td></tr>');
                        $('#father_c').append('<option value='+ data.code +'>'+ data.name +'</option>');
                        // $('.layui-anim-upbit').append('<dd lay-value='+ data.code +' class="">'+ data.name +'</dd>');
                        form.render('select');
                    }
                }
            });
              return false;
        });


    });

    //选择全部
    function choiseAll() {
        var cclassifys = document.getElementsByName("c_classify");
        var cclassifys_t = document.getElementById("c_classify_t");
        if(cclassifys_t.checked){
            for (var i=0;i<cclassifys.length;i++){
                cclassifys[i].checked = true;
            }
        }else{
            for (var i=0;i<cclassifys.length;i++){
                cclassifys[i].checked = false;
            }
        }


    }

    //批量删除提交
    function delAll () {
        var cclassifys = document.getElementsByName("c_classify");
        if(cclassifys.length == 0){
            return;
        }
        var cclassifys = document.getElementsByName("c_classify");

        layer.confirm('确认要删除吗？',function(index){
            var cclassifys = document.getElementsByName("c_classify");
            for (var i=0;i<cclassifys.length;i++){
                if(cclassifys[i].checked){
                    del_classify(cclassifys[i]);
                }
            }
            // clear_list();
            layer.alert("删除成功", {icon: 6});
            pageContro(currentPage);
            // pageContro(currentPage);
            /*location.replace(location.href);*/

        });
    }

    //-编辑
    function cate_edit (title,url,id,w,h) {
        x_admin_show(title,url,w,h);
    }

    /*删除不询问*/
    function del_classify(checkbox) {
        $.ajax({
            type:"POST",
            url:"${pageContext.request.contextPath}/deleteClassify",
            data: {"code":checkbox.value},
            success:function (data) {
                if(data.code == "0"){
                    layer.alert("删除失败", {icon: 6});
                }else {
                    // layer.alert("删除成功", {icon: 6});
                    //删除下拉列表
                    var fahter_c = document.getElementById("father_c");
                    // alert(fahter_c);
                    var options = fahter_c.childNodes;
                    for(var i=0;i<options.length;i++){
                        if(options[i].value == checkbox.value){
                            // alert(options[i].value);
                            var p = options[i].parentNode;
                            p.removeChild(options[i]);
                            form.render('select');
                        }
                    }

                }

            }
        });
    }

    /*-删除*/
    function cate_del(obj,code){
        layer.confirm('确认要删除吗？',function(index){
            $.ajax({
                type:"POST",
                url:"${pageContext.request.contextPath}/deleteClassify",
                data: {"code":code},
                success:function (data) {
                    if(data.code == "0"){
                        layer.alert("删除失败", {icon: 6});
                    }else {
                        layer.alert("删除成功", {icon: 6});
                        pageContro(currentPage);
                        // $(obj).parents("tr").remove();

                        //删除下拉列表
                        var fahter_c = document.getElementById("father_c");
                        // alert(fahter_c);
                        var options = fahter_c.childNodes;
                        for(var i=0;i<options.length;i++){
                            if(options[i].value == code){
                                // alert(options[i].value);
                                var p = options[i].parentNode;
                                p.removeChild(options[i]);
                                form.render('select');
                            }
                        }
                    }

                }
            });
        });
    }
</script>
<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
</body>
</html>